{include  file="common/doc" /}
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="toolbar layui-form">
            <?php echo $operation['toolbar'] ?>
        </div>
        <div class="layui-card-body">

            <table class="layui-table" id="table_list" lay-filter="table_list"></table>
        </div>
    </div>
</div>
<!-- 表格操作行-->
<script type="text/html" id="op_table">
    <?php echo $operation['tool']; ?>
</script>
<template id="form_template" style="display: none">
    <form class="layui-form" id='form' lay-filter="form" style="margin-top:10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">上级</label>
            <div class="layui-input-inline">
                <input type="text" id="tree" lay-filter="tree" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="category_title" placeholder="请输入"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text"  name="seo_title" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-inline">
                <input type="hidden" name="category_parent">
                <input type="text"  name="seo_keywords" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">序号</label>
            <div class="layui-input-inline">
                <input type="number" value="255" name="sort" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="seo_desc" placeholder="请输入描述内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit lay-filter="form_submit">提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>
</template>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        treeTable: 'treeTable/treeTable', //主入口模块
        iconPicker: 'iconPicker/iconPicker' //主入口模块
    }).use(['index', 'util', 'treeTable', 'treeSelect', 'laytpl'], function (){
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var treeTable = layui.treeTable;
        var treeSelect = layui.treeSelect;
        function open(data){
            function treeChooser(input,chooser_node = 0) {
                treeSelect.render({
                    // 选择器
                    elem: '#tree',
                    // 数据
                    data: 'read?data_type=tree',
                    // 异步加载方式：get/post，默认get
                    type: 'get',
                    // 占位符
                    placeholder: '占位符',
                    // 是否开启搜索功能：true/false，默认false
                    search: true,
                    // 点击回调
                    click: function (d) {
                        $("input[name=" + input + "]").val(d.current.id);
                    },
                    success: function (d) {
                        treeSelect.checkNode('tree', chooser_node);
                    }

                });
            }
            layer.open({
                type: 1,
                title: '菜单编辑',
                area: ['500px', '500px'],
                content: $('#form_template').html(),
                success: function (lay, index) {
                    let url = 'add';
                    if(data){
                        treeChooser('category_parent', data['category_parent']);
                        url= 'upd';
                        form.val('form',data);
                    }else{

                        treeChooser('category_parent');
                    }
                    form.render();

                    form.on('submit(form_submit)', function (ewa) {
                        if (data){
                        ewa.field['category_id'] =data['category_id'];
                        }
                        let status = request({'url':url,'data':ewa.field});
                        if (status){
                            layer.close(index);
                            table.reload('table_list');
                        }
                        return false;
                    });
                }
            })
        }
        function table(){
            $.ajax({
                url:'read',
                method:'get',
                success:function(response){
                    var table = treeTable.render({
                        elem: '#table_list',
                        tree: {
                            iconIndex: 2,
                            pidName:'category_parent',
                            idName:'category_id',
                            isPidData:true,
                        },
                        data:response['data'],
                        cols: [
                            {type: 'numbers'},
                            {type: 'checkbox'},
                            {field: 'category_title', title: '分类名称',width:200},
                            {field: 'seo_title', title: 'seo标题'},
                            {field: 'seo_keywords', title: 'seo关键字'},
                            {field: 'seo_desc', title: 'seo描述'},
                            {align: 'center', toolbar: '#op_table', title: '操作',width:300}
                        ],
                        style: 'margin-top:0;'
                    });


                }

            });
        }
        table();
        treeTable.on('tool(table_list)',function(obj){
          if (obj.event == 'upd'){
              open(obj.data);
          }
          if (obj.event=='del'){
              $.post('del',{'category_id':obj.data['category_id']},function(res){
                  obj.del();
                  layer.msg(res['msg']);
              })
          }
        });
        $('.toolbar').on('click','lay-event[event]',function(){
            open();
        });

    });
</script>
</body>
</html>

